<script setup lang='ts'>
// 自定义 规则
//interface Props {
//}

import { showToast } from '@/public';
import { onMounted, ref, defineEmits, defineModel } from 'vue';
const props = defineProps({
    min: {
        type: Number,
        default: () => 1
    },
    max: {
        type: Number,
        default: () => 99
    }
});

/**
 * @property 变量
 */
const emits = defineEmits(['change']);
//  数量
const sum = defineModel<number>('sum')
// 数量
const amount = ref<number>(1);
/**
 * @property  所有请求以api开头 如:apiDataInfo
 */


/**
 * @property 自定义事件 以事件名开头 如: clickButton,inputDev
 */
// 添加
const clickAdd = () => {
    if (sum.value && sum.value < props.max) {
        emits('change', (isTrue: boolean, msg?: string) => {
            if (isTrue && sum.value) sum.value += 1;
            else showToast(msg)
        })
    }

}
// 减少
const clickReaduce = () => {
    if (sum.value && sum.value > props.min) {
        sum.value -= 1
    } else {
        showToast('已达到最小数值')
    }
    emits('change')
}
/**
 * @property 内置方法
 */


</script>
<template>
    <div class="flex b-rd-1" style="border: 1rpx solid #00BD78;">
        <div class="size-44 fc font-size-28 def-c bg-[#DBFFF2]" style="border-radius: 8rpx 0 0 8rpx;"
            @click="clickReaduce">
            -
        </div>
        <div class="w-78 h-44 fc">
            {{ sum }}
        </div>
        <div class="size-44 fc font-size-28 def-c bg-[#DBFFF2]" style="border-radius: 0 8rpx 8rpx 0;" @click="clickAdd">
            +
        </div>
    </div>
</template>
<style lang="scss" scoped></style>